@charset "UTF-8";
// 通用类
[v-cloak] {
    display: none;
}

.bg-block {
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #F7C2B9;
}

.scroll-y {
    overflow-y: scroll;
    &::-webkit-scrollbar {
        display: none;
    }
}

.iagree {
    font-size: 18px;
    padding: 4px 16px;
    background-color: #e86344;
    outline: none;
    border: none;
    box-shadow: none;
    border-radius: 4px;
    color: #eee;
    display: block;
    margin: 16px auto 0;
}

// 必填项目提示
span.imp {
    color: red;
    position: absolute;
}

// 通用-title
.ptitle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0.5em;
    padding-left: 1em;
    height: 1.7em;
    span {
        background-color: #e86344;
        width: 4px;
        height: 1em;
        margin-right: 0.3em;
    }
    h1 {
        font-size: 1em;
    }
}

// 顶部返回区域
.banner-back {
    height: 10%;
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    background: black;
    color: white;
    font-size: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    &~* {
        position: relative;
        top: 10%;
    }
    >span {
        display: inline-block;
        padding: 1em;
        width: 5.2em;
        height: 3em;
        position: absolute;
        top: calc(~"50% - 1.5em");
        left: 0;
        &::before {
            content: '';
            display: block;
            width: 1em;
            height: 1em;
            background: url("../img/icon/back.svg") no-repeat;
            background-size: contain;
        }
        >i {
            line-height: 1em;
            font-style: normal;
            position: absolute;
            left: 2.2em;
            width: 2em;
            top: calc(~"50% - 0.5em");
        }
    }
}

// 流动通知信息
.info-wrap {
    width: 400%;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    >p {
        animation: scrolltext 10s linear infinite;
        display: inline-flex;
        width: 25%;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 8px;
        padding-left: 16px;
        font-size: 0.8em;
        >i {
            display: inline-block;
            height: 1.2em;
            width: 1.2em;
            background: url("../img/icon/speaker.svg") no-repeat;
            background-size: contain;
        }
    }
}

.loan-title-small {
    font-size: 1.1em;
    font-weight: bold;
    padding: 1em 0;
}

.btn {
    @color: #ffffff;
    display: inline-block;
    text-align: center;
    border: 1px solid #e9e9e9;
    background-color: @color;
    padding: 0.1em 0.3em; // &:hover {
    //     background-color: darken(@color, 10%);
    // }
    &:active {
        background-color: darken(@color, 10%);
    }
}

// 底部按钮导航
.nav-bottom {
    background-color: #e86344;
    height: 5%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    a {
        font-size: 0.7em;
        border-radius: 0.3em;
    }
}

.btn-red,
.btn.selected {
    @color: #df5139;
    background-color: @color;
    border: 1px solid @color;
    color: #ffffff; // &:hover {
    //     background-color: lighten(@color, 10%);
    // }
    &:active {
        background-color: lighten(@color, 10%);
    }
}

// 底部-下一步按钮
.next {
    width: 100%;
    text-align: center;
    margin: 1.5em 0 1em;
    a {
        display: inline-block;
        text-align: center;
        width: 35%;
        font-size: .9em;
        padding: 0.4em 0;
        border-radius: 0.3em;
    }
}

// 办卡评估 title
.assess-title {
    width: 100%;
    font-size: 1em;
    text-align: center;
    padding: 0.8em 0;
}

// 帮我选卡 title
.pick-title {
    text-align: center;
    padding: 1.2em 0 0.8em;
    h1 {
        font-size: 1.2em;
        color: #e76344;
    }
    small {
        font-size: 0.5em;
        color: #b3b3b3;
    }
}

// 进度查询-银行链接
.bank-link {
    background-color: #ffffff;
    margin-bottom: 8px;
    a {
        padding: 0.5em 0;
        display: flex;
        min-height: 36px;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        img {
            margin-left: 1em;
            height: 36px;
            width: 36px;
        }
        span {
            font-size: 18px;
            flex-grow: 1;
            margin-left: 8px;
        }
        i {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 1em;
            background: url("../img/icon/next.svg") no-repeat;
            background-size: contain;
        }
    }
}

// 立即申请-表单
.form-group {
    width: 100%;
    min-height: 36px;
    line-height: calc(~"36px + 0.4em");
    font-size: 0.85em;
    background-color: #ffffff;
    margin-bottom: 8px;
    padding: 0 16px;
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        line-height: 0;
        content: "";
        clear: both;
    }
    label {
        width: 30%;
        min-width: 66px;
        float: left;
        text-align: justify;
        text-align-last: justify;
        font-weight: bold;
        &:after {
            display: inline;
            overflow: hidden;
            content: '';
        }
    }
    input {
        font-size: 1em;
        min-height: 36px;
        width: 65%;
        border: none;
        margin-bottom:0;
    }
}

// 用户协议
.agreement {
    height: 90%;
    padding: 1em;
    >section {
        >h1,
        >h2 {
            text-align: center;
            font-weight: bold;
            line-height: 300%;
        }
        >h1 {
            font-size: 1.2em;
        }
        >h2 {
            font-size: 1em;
        }
        >p,
        >ol>li {
            font-size: 14px;
            line-height: 150%;
            text-align: justify;
        }
        >p {
            text-indent: 2em;
        }
        >ol>li>ol>li {
            text-indent: 2em
        }
    }
}

// 通用类完
//
// 基础设定
html,
body,
body>div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f8f8f8;
    &.mui-popup {
        height: auto;
    }
}

div,
section,
article,
ul,
li,
p,
span,
i,
a,
button,
input {
    box-sizing: border-box;
}

a,
input,
button {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

// 贷款页开始
//
.loan-page {
    >.header {
        width: inherit; //height: 50%;
        height: 45%;
        position: relative;
        >.banner {
            //height: 80%;
            height: 77%;
            width: 100%;
        }
        >.info-wrap {
            //height: 20%;
            height: 23%;
        }
        >.nav {
            z-index: 2;
            position: absolute; //top: 62%;
            //height: 25%;
            top: 56%;
            height: 30%;
            width: 90%;
            margin: 0 5%;
            padding: 0 10%;
            display: flex;
            flex-direction: row; //justify-content: space-around;
            justify-content: space-between;
            align-items: center;
            a {
                height: 70%;
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img {
                    height: 80%;
                }
                span {
                    margin-top: 0.3em;
                    font-size: 0.8em;
                }
            }
        }
    }
    >.scroll-y {
        height: 55%;
        .main, // .footer {
        //     width: 100%;
        //     margin-top: 8px;
        //     background-color: #ffffff;
        // }
        .main {
            //height: calc(~"25% - 8px");
            //height: calc(~"61% - 8px");
            height: calc(~"100% - 8px");
            .product {
                height: calc(~"100% - 1.7em");
                ul {
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    li {
                        width: 25%;
                        text-align: center;
                        padding: 0.2em 0;
                        margin-top: 1em;
                        a {
                            width: 100%;
                            height: 100%;
                            display: inline-flex;
                            flex-direction: column;
                            justify-content: space-around;
                            align-items: center;
                            img {
                                max-width: 35%; //height: 1.5em;
                                //width: 1.5em;
                                margin-bottom: 0.2em;
                            }
                            span {
                                font-size: 0.7em;
                            }
                        }
                    }
                }
            }
        } // .footer {
        //     display: none; //height: calc(~"20% - 8px");
        //     height: calc(~"39% - 8px");
        //     .service {
        //         height: calc(~"100% - 1.7em");
        //         display: flex;
        //         flex-direction: row;
        //         justify-content: space-around;
        //         align-items: center;
        //         div {
        //             width: 44%;
        //             >a {
        //                 display: inline-block;
        //                 width: 100%;
        //                 >img {
        //                     max-width: 100%;
        //                     max-height: 100%;
        //                 }
        //             }
        //         }
        //     }
        // }
        .ad {
            width: 100%;
            position: fixed;
            bottom: calc(~"10% - 15px");
            left: 0;
            >img {
                width: 100%;
            }
        }
    }
}

// 贷款页
// 贷款产品页开始
//
// 贷款产品页
.loan-item-page {
    >.banner-back {
        background-color: #e76344;
    }
    >.wrap {
        padding: 0.5em 1em;
        height: 90%;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        .loan-item {
            display: block; //height: 25%;
            padding: 0.5em;
            &:not(:last-child) {
                margin-bottom: 0.7em;
            }
            .item-name {
                font-size: 0.9em;
                padding-bottom: 0.3em;
                border-bottom: 1px solid #f1f1f1;
            }
            .item-detail {
                margin-top: 0.3em;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                div {
                    width: 50%;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;
                }
                .detail-l {
                    span {
                        font-size: 1.5em;
                        color: #e76343;
                        line-height: calc(90%);
                    }
                    p {
                        color: #9a9392;
                        font-size: 0.7em;
                    }
                }
                .detail-r {
                    div {
                        font-size: 0.7em;
                        width: 100%;
                        margin-left: 0.2em;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        &:not(:last-child) {
                            margin-bottom: 0.8em;
                        }
                        p {
                            width: 4em;
                            color: #9a9392;
                            margin-right: 0.5em;
                            display: inline-flex;
                            flex-direction: row;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
    }
}

// 贷款产品详情页
.loan-item-page2 {
    >.banner {
        height: 40%;
        .title {
            background-color: #e86344;
            position: relative;
            height: 60%;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            h1 {
                padding-top: 1.5em;
                font-size: 1em;
                flex-grow: 3;
            }
            span {
                font-size: 1.5em;
                flex-grow: 1;
            }
            small {
                font-size: 1em;
                flex-grow: 2;
            }
            i {
                display: inline-block;
                width: 1em;
                height: 1em;
                background: url("../img/icon/back.svg") no-repeat;
                background-size: contain;
                position: absolute;
                top: calc(~"50% - 0.5em");
                left: 1em;
            }
        }
        .info {
            height: 25%;
            background-color: #ffffff;
            ul {
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                li {
                    width: 33.33333333%;
                    text-align: center;
                    font-size: 0.7em;
                    &:not(:first-child) {
                        border-left: 1px solid #f8f8f8;
                    }
                    p:first-child {
                        color: #777777;
                        margin-bottom: 0.8em;
                    }
                    p:last-child {
                        font-weight: bold;
                    }
                }
            }
        }
        .tel {
            height: 15%;
            color: #b8b8b8;
            font-size: 0.7em;
            margin-left: 2em;
            display: flex;
            align-items: center;
        }
    }
    >.loan-wrap {
        max-height: 60%;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        >.progress {
            height: 20%;
            background-color: #ffffff;
            h1 {
                margin-left: 1em;
            }
            ul {
                height: calc(~"100% - 2.2em");
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 1em;
                align-items: flex-start;
                li {
                    text-align: center;
                    width: 18%;
                    height: 100%;
                    img {
                        width: 60%;
                        margin: 0.5em 0;
                    }
                    span {
                        font-size: 0.9em;
                        display: block;
                    }
                }
            }
        }
        >.advantage {
            background-color: #ffffff;
            margin: 0.5em 0;
            h1 {
                margin-left: 1em;
            }
            ol {
                font-size: 0.7em;
                padding: 0 0 1em 3.5em;
                list-style: decimal;
                color: #858585;
                li {
                    line-height: 150%;
                    list-style: inherit;
                }
            }
        }
        >.next {
            margin-bottom: 1.5em;
        }
    }
}

// 信用卡页开始
//
// 信用卡页
.credit-page {
    .banner {
        //height: calc(~"30% - 36px");
        width: 100%;
    }
    .info-wrap {
        height: 36px;
    }
    >.scroll-y {
        //height: 73%;
        .normal-card {
            //height: 30%;
            height: 35%;
            margin: 8px 0;
            background-color: #ffffff;
            .cards {
                margin-top: 8px;
                height: calc(~"100% - 1.7em - 8px");
                .scroll {
                    height: 80%;
                    margin-left: 1em;
                    width: calc(~"100% - 2em");
                    overflow: hidden;
                    overflow-x: scroll;
                    &::-webkit-scrollbar {
                        display: none
                    }
                    ul {
                        height: 100%;
                        min-width: 100%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        justify-content: flex-start;
                        align-items: center;
                        li {
                            height: 100%;
                            width: 40%;
                            margin-right: 16px;
                            a {
                                display: inline-flex;
                                justify-content: flex-start;
                                align-items: center;
                                width: 100%;
                                height: 100%;
                                img {
                                    max-width: 100%;
                                    max-height: 100%;
                                }
                            }
                        }
                    }
                }
                .more {
                    height: 20%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 1em;
                    a {
                        font-size: 0.8em;
                        color: #e57765;
                        display: flex;
                        align-items: center;
                        span {
                            display: inline-block;
                            width: 1em;
                            height: 1em;
                            background: url("../img/icon/right-thin-arrowheads.svg") no-repeat;
                            background-size: contain;
                        }
                    }
                }
            }
        }
        .platinum-card {
            //height: 25%;
            //height: 38%;
            height: calc(~"65% - 16px");
            background-color: #ffffff;
            ul {
                height: calc(~"100% - 1.7em");
                width: 100%; //padding-top: 0.5em;
                padding: 8px 1em 0;
                display: flex;
                flex-direction: row; //justify-content: center;
                justify-content: space-between;
                align-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                li {
                    width: 32%;
                    text-align: center;
                    a {
                        //display: inline-block;
                        //text-align: center;
                        width: 100%;
                        height: 100%;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        img {
                            //max-width: 95%;
                            //max-height: 90%;
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }
                }
            }
        } // .service {
        //     display: none;
        //     background-color: #ffffff;
        //     flex-direction: row; //justify-content: space-around;
        //     justify-content: center;
        //     align-items: center; //height: calc(~"18% - 16px");
        //     height: calc(~"32% - 16px");
        //     div {
        //         //height: 75%;
        //         height: 100%;
        //         width: 41%;
        //         &:first-child {
        //             margin-right: 6%;
        //         }
        //         a {
        //             display: inline-flex;
        //             align-items: center;
        //             justify-content: center;
        //             height: 100%;
        //             width: 100%;
        //             img {
        //                 max-width: 100%;
        //                 max-height: 100%;
        //             }
        //         }
        //     }
        // }
    }
    .nav-bottom {
        display: none;
    }
}

// 更多页
.more-cards {
    >.banner {
        height: 20%;
    }
    >.cards {
        height: 70%;
        >ul {
            width: 100%;
            height: calc(~"100% - 1.7em");
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            padding-top: 1em;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                display: none
            }
            >li {
                margin-left: 6.66666666%;
                width: 40%;
                height: 30%;
                >a {
                    display: inline-block;
                    height: 100%;
                    width: 100%;
                    >img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
            }
        }
    }
}

// 立即申请页
.apply-page {
    >div {
        max-height: 90%;
        .agreement {
            display: flex;
            align-items: center;
            padding: 1em 0 1em 24px;
            a {
                color: #b2b2b2;
                text-decoration: underline;
            }
            input {
                opacity: 0;
                display: inline-block;
                width: 20px;
                height: 20px;
                position: relative;
                right: 20px;
            }
            i {
                display: inline-block;
                font-style: normal;
                text-align: center;
                font-size: 16px;
                height: 20px;
                width: 20px;
                color: #ffffff;
                border-radius: 50%;
                background-color: #b3b3b3;
                border: 2px solid #b3b3b3;
                &.actived {
                    background-color: #38cb70;
                    border: 2px solid #38cb70;
                }
            }
        }
        div>button {
            border: none;
            width: 100%;
            padding: 0.3em 0;
            font-size: 1.2em;
            line-height: 36px;
            color: #ffffff;
            @color: #38cb70;
            background-color: @color;
            &:active {
                background-color: darken(@color, 20%)
            }
        }
    }
}

// 进度查询页
.progress-page {
    >.bank-wrap {
        height: 90%;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}

// 信用卡攻略
.strategy-page1 {
    >div>h1 {
        background-color: #ffffff;
        font-size: 1em;
        font-weight: bolder;
        padding-left: 1em;
        height: 36px;
        line-height: 36px;
    }
    .hot {
        height: 30%;
        .img-container {
            position: relative;
            overflow: hidden;
            height: calc(~"100% - 36px");
            .swiper-wrapper>a {
                display: inline-block;
                width: 100%;
                height: 100%;
                &:nth-child(odd) {
                    background: #C46161;
                }
                &:nth-child(even) {
                    background: #5E9E70;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .dots {
                z-index: 1;
                position: absolute;
                text-align: center;
                bottom: 8px;
                >span {
                    background: #ffffff;
                }
            }
        }
    }
    .news {
        height: 60%;
        overflow: hidden;
        overflow-y: scroll;
        >.news-wrap {
            height: calc(~"100% - 36px");
            overflow-y: scroll;
            &::-webkit-scrollbar {
                display: none;
            }
        }
        >.news-wrap>.news-block {
            background-color: #ffffff;
            height: 35%;
            margin-bottom: 8px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1em;
            >div {
                height: 100%;
                &:first-child {
                    width: 55%;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: space-between;
                    h1 {
                        padding-right: 1em;
                        font-size: 0.9em;
                        text-align: justify;
                    }
                    p {
                        display: inline-flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 0.7em;
                        color: #a9a9a9;
                        span {
                            display: inline-block;
                            width: 25%;
                        }
                        img {
                            margin-right: 0.5em;
                            width: 1em;
                            height: 1em;
                        }
                    }
                }
                &:last-child {
                    width: 45%;
                    text-align: right;
                    >img {
                        max-height: 100%;
                        max-width: 100%;
                    }
                }
            }
        }
    }
}

// 信用卡攻略-文章
.strategy-page2 {
    .picture {
        height: 25%;
        >img {
            width: 100%;
            height: 100%;
        }
    }
    >article {
        height: 65%;
        padding: 0 1em;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        >h1 {
            padding: 1.5em 0;
            font-weight: bold;
            font-size: 1em;
        }
        >p {
            color: #858585;
            margin-bottom: 1em;
            font-size: 0.9em;
            text-align: justify;
            line-height: 150%;
            text-indent: 2em;
        }
    }
}

// 帮我选卡页
.pick-card {
    >.scroll-y {
        height: 90%;
        >.banner {
            height: 30%;
            background: url("../img/banner/xk_bannr.png") no-repeat;
            background-size: 100% 100%;
        }
        >.pick-feature {
            ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                li {
                    width: 40%;
                    text-align: center;
                    margin-top: 0.8em;
                    a {
                        @color: #e76849;
                        font-size: 1em;
                        display: inline-block;
                        height: 100%;
                        width: 80%;
                        color: @color;
                        border: 1px solid @color;
                        border-radius: 1.8em;
                        padding: 0.4em 0;
                        &.selected {
                            background-color: @color;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
        >.next>a {
            border-radius: 2em;
        }
    }
}

// 帮我选卡页2
.pick-card2 {
    >.scroll-y {
        height: 90%;
        >.pick-feature {
            height: 56%;
            padding: 0 1em;
            >ul {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                >li {
                    width: 25%;
                    height: 33.33333333%;
                    >a {
                        width: 100%;
                        height: 100%;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        >img {
                            max-height: 50%;
                            max-width: 50%;
                        }
                        >span {
                            margin-top: 1em;
                            font-size: 0.7em;
                            color: #b7b7b7;
                        }
                    }
                }
            }
        }
        >.next>a {
            border-radius: 2em;
            &:first-child {
                @color: #df5139;
                color: @color;
                border-color: @color;
                margin-right: 0.7em;
            }
        }
    }
}

// 帮我选卡页3
.pick-card3 {
    >.scroll-y {
        height: 90%;
        >.pick-feature {
            padding: 0 1em;
            >.about-you {
                >h1 {
                    margin: 0 0 0.5em 1em;
                    font-size: 0.8em;
                    color: #868686;
                }
                >ul {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    >li {
                        width: 33.33333333%;
                        >a {
                            width: 100%;
                            height: 100%;
                            display: inline-flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            >img {
                                max-width: 70%;
                                max-height: 70%;
                            }
                            >span {
                                margin: 0.5em 0 1em 0;
                                font-size: 0.7em;
                                color: #b7b7b7;
                            }
                        }
                    }
                }
            }
        }
        >.next>a {
            border-radius: 2em;
            &:first-child {
                @color: #df5139;
                color: @color;
                border-color: @color;
                margin-right: 0.7em;
            }
        }
    }
}

// 选卡结果
.pick-result {
    >.pick-title {
        padding-top: 0.5em;
        line-height: 1.2em;
    }
    >.repick {
        height: 36px;
        text-align: center;
        >a {
            font-size: 0.7em;
            border-radius: 2em;
            @color: #df5139;
            color: @color;
            border-color: @color;
            padding: 0.1em 0.4em;
        }
    }
    >.swiper-container {
        height: calc(~"90% - 2.5em - 36px");
        >.swiper-wrapper {
            >.swiper-slide {
                >.chart {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff;
                    padding: 2em;
                    >.property {
                        position: absolute;
                        font-size: 0.7em;
                        background-color: #f88d7b;
                        border-radius: 2em;
                        padding: 0.2em 1em;
                        &:nth-child(1) {
                            top: 1em;
                            left: 5em;
                        }
                        &:nth-child(2) {
                            top: 3em;
                            right: 4em;
                        }
                        &:nth-child(3) {
                            top: calc(~"50% - 0.5em");
                            left: 3em;
                        }
                        &:nth-child(4) {
                            bottom: 1.5em;
                            left: 5.5em;
                        }
                        &:nth-child(5) {
                            bottom: 1.5em;
                            right: 5.5em;
                        }
                    }
                    >.circle {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        width: 7em;
                        height: 7em;
                        border: 1em solid #ed9788;
                        background-color: #df5139;
                        >p {
                            &:first-child {
                                font-size: 0.8em;
                                margin-bottom: 0.3em;
                            }
                            &:last-child {
                                font-size: 1.1em;
                            }
                        }
                    }
                }
                >.cards {
                    width: calc(~"100% - 4em");
                    margin: 0 2em 1em;
                    padding: 1em;
                    border-radius: 0.8em;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    >img {
                        border-radius: 0.8em;
                        overflow: hidden;
                        width: 90%
                    }
                    >.introduction {
                        text-align: center;
                        >h1 {
                            font-size: 0.7em;
                            font-weight: bold;
                            padding: 0.2em;
                        }
                        >p>span {
                            border: 1px solid #e68677;
                            color: #e68677;
                            font-size: 0.6em;
                            padding: 0.1em 0.4em;
                            &:not(:last-child) {
                                margin-right: 1.5em;
                            }
                        }
                        >strong {
                            line-height: 3em;
                            color: #8e8e8e;
                            font-size: 0.7em;
                        }
                    }
                    >.next {
                        margin-top: 0;
                        a {
                            width: 50%;
                            font-size: 0.8em;
                            padding: 0.3em 0;
                            border-radius: 2em;
                        }
                    }
                }
            }
        }
    }
}

// 办卡评估页
.card-assess-page {
    >.scroll-y {
        height: 90%;
        >div>ul {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            li {
                width: 33.33333333%;
                a {
                    padding: 0.6em 0;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    font-size: 0.8em;
                }
            }
        }
    }
}

// 办卡评估页完
//
// 办卡有礼页
.recommend-page {
    background-color: #efd358;
    .content {
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .info {
            height: 42%;
            overflow: hidden;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                display: none;
            }
            padding: 0 2em;
            h1 {
                font-size: 1.1em;
                font-weight: bolder;
                line-height: 200%;
            }
            p {
                margin-top: 8px;
                text-align: right;
                line-height: 120%;
                font-size: 0.7em;
                color: #696866;
            }
            ul {
                font-size: 0.7em;
                color: #696866;
                padding-left: 1.5em;
                li {
                    text-align: justify;
                    line-height: 150%;
                    margin: 0.5em 0;
                    &:before {
                        content: "";
                        display: inline-block;
                        margin-left: -1.5em;
                        padding-left: 0.5em;
                        position: relative;
                        top: 0.1em;
                        height: 1em;
                        width: 1em;
                        background: url("../img/icon/circle.svg") no-repeat;
                        background-size: contain;
                    }
                }
            }
        }
    }
}

// 办卡有礼页完
// 媒体查询类
//
// iPhone 4 320x568
@media screen and (max-height: 480px) {
    body {
        font-size: 16px;
    }
}

// iPhone 5 320x568
@media screen and (min-height: 481px) and (max-height: 568px) {
    body {
        font-size: 16px;
    }
}

// Samsung Galaxy S5 360x640
@media screen and (min-height: 569px) and (max-height: 640px) {
    body {
        font-size: 18px;
    }
}

// iPhone 6 375x667
@media screen and (min-height: 641px) and (max-height: 667px) {
    body {
        font-size: 20px;
    }
}

// iPhone 6P 414x736
@media screen and (min-height: 668px) and (max-height: 736px) {
    body {
        font-size: 22px;
    }
}

// 媒体查询完
//动画类
@keyframes scrolltext {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-300%, 0);
        -moz-transform: translate(-300%, 0);
        -ms-transform: translate(-300%, 0);
        -o-transform: translate(-300%, 0);
        transform: translate(-300%, 0);
    }
}